<template>
  <view class="content">
    <div class="logo_tab">
      <image
        src="../../static/logoss.png"
        style="width: 210rpx; height: 48rpx; margin-right: 35rpx"
        mode="scaleToFill"
      />

      <uv-tabs
        @click="tabclick"
        :list="[
          {
            name: '推荐',
          },
          {
            name: '排队',
          },
        ]"
        :activeStyle="{
          color: '#00bef8',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
        :inactiveStyle="{
          color: '#00bef8',
          transform: 'scale(1)',
        }"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
      ></uv-tabs>
    </div>

    <div v-if="showIndex" class="showIndex_s">
      <uv-notice-bar text="各位亲爱的会员朋友，购物前请仔细阅读购卡须知，以及排队返利参与规则。"></uv-notice-bar>
      <div style="margin-bottom: 20rpx">
        <uv-swiper height="346rpx" :list="swiper_list"></uv-swiper>
      </div>

      <div class="box_index_tag">
        <div @click="noVEIw" class="box_index_tag_s">
          <image
            src="../../static/bc1.png"
            style="width: 79rpx; height: 72rpx"
            mode="scaleToFill"
          />
          <div style="font-size: 26rpx; margin-top: 10rpx">签到积分</div>
        </div>

        <div @click="noVEIw" class="box_index_tag_s">
          <image
            src="../../static/bc2.png"
            style="width: 79rpx; height: 72rpx"
            mode="scaleToFill"
          />
          <div style="font-size: 26rpx; margin-top: 10rpx">礼品兑换</div>
        </div>

        <div @click="noVEIw2" class="box_index_tag_s">
          <image
            src="../../static/bc3.png"
            style="width: 79rpx; height: 72rpx"
            mode="scaleToFill"
          />
          <div style="font-size: 26rpx; margin-top: 10rpx">好物推荐</div>
        </div>

        <div @click="noVEIw" class="box_index_tag_s">
          <image
            src="../../static/bc4.png"
            style="width: 79rpx; height: 72rpx"
            mode="scaleToFill"
          />
          <div style="font-size: 26rpx; margin-top: 10rpx">健康测试</div>
        </div>

        <div @click="noVEIw" class="box_index_tag_s">
          <image
            src="../../static/bc5.png"
            style="width: 79rpx; height: 72rpx"
          />
          <div style="font-size: 26rpx; margin-top: 10rpx">健康食品</div>
        </div>

        <div @click="noVEIw2" class="box_index_tag_s">
          <image
            src="../../static/bc6.png"
            style="width: 85rpx; height: 72rpx"
            mode="scaleToFill"
          />
          <div style="font-size: 26rpx; margin-top: 10rpx">热门课程</div>
        </div>

        <div @click="noVEIw" class="box_index_tag_s">
          <image
            src="../../static/bc7.png"
            style="width: 85rpx; height: 72rpx"
            mode="scaleToFill"
          />
          <div style="font-size: 26rpx; margin-top: 10rpx">热门项目</div>
        </div>

        <div @click="noVEIw" class="box_index_tag_s">
          <image
            src="../../static/bc8.png"
            style="width: 85rpx; height: 72rpx"
            mode="scaleToFill"
          />
          <div style="font-size: 26rpx; margin-top: 10rpx">品牌团队</div>
        </div>
      </div>

      <div class="image_box">
        <image
          src="../../static/ad1.png"
          style="width: 49.8%; height: 193rpx"
          mode="scaleToFill"
        />
        <image
          src="../../static/ad2.png"
          style="width: 49.8%; height: 193rpx"
          mode="scaleToFill"
        />
      </div>

      <div class="jieshao_icon">
        <image
          src="../../static/jieshao.png"
          style="width: 100%; height: 2000rpx"
          mode="scaleToFill"
        />
      </div>
    </div>

    <div style="margin-top: 20rpx" v-else>
      <linup :show='showIndex'></linup>
    </div>

    <view v-if="false" class="header_nav">
      <view
        @click="gotoCat"
        style="display: flex; align-items: center; flex-direction: column"
      >
        <uv-image
          :lazy-load="true"
          src="/static/setion.png"
          width="30rpx"
          height="30rpx"
        ></uv-image>
        <span style="font-size: 19rpx; margin-top: 5rpx">分类</span>
      </view>

      <view @click="goToSearch">
        <uv-input
          shape="circle"
          :customStyle="{
            width: '576rpx',
            background: '#F5F6F8',
            border: 'none',
          }"
          placeholderClass="placeholderClassss"
          placeholder="点击搜索相关商品"
          prefixIcon="search"
          prefixIconStyle="font-size: 32rpx;color: #909399"
        ></uv-input>
      </view>

      <view
        @click="clickSeiton"
        style="display: flex; align-items: center; flex-direction: column"
      >
        <uv-image
          :lazy-load="true"
          src="/static/xx@2x.png"
          width="30rpx"
          height="30rpx"
        ></uv-image>
        <span style="font-size: 19rpx; margin-top: 5rpx">消息</span>
      </view>
    </view>

    <view v-if="false" class="banner">
      <view class="left">
        <view>
          <view class="p_fon11">品牌好店</view>
          <view class="p_fon12">放心买 全保真</view>
          <uv-image
            :lazy-load="true"
            src="/static/go1@2x.png"
            width="72rpx"
            height="30rpx"
          ></uv-image>
        </view>

        <view
          class="view_clss"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-left: 20rpx;
            width: 140rpx;
          "
        >
          <uv-image
            :customStyle="{ marginBottom: '10rpx' }"
            class="list_img"
            :lazy-load="true"
            src="https://img01.yzcdn.cn/public_files/7f12433bfafd042fc81bfd8a73a119cc.png!large.png"
            width="64rpx"
            height="64rpx"
          ></uv-image>
          <uv-image
            :customStyle="{ marginBottom: '10rpx' }"
            class="list_img"
            :lazy-load="true"
            src="https://img01.yzcdn.cn/public_files/7f12433bfafd042fc81bfd8a73a119cc.png!large.png"
            width="64rpx"
            height="64rpx"
          ></uv-image>
          <uv-image
            :customStyle="{ marginBottom: '10rpx' }"
            class="list_img"
            :lazy-load="true"
            src="https://img01.yzcdn.cn/public_files/7f12433bfafd042fc81bfd8a73a119cc.png!large.png"
            width="64rpx"
            height="64rpx"
          ></uv-image>
          <uv-image
            :customStyle="{ marginBottom: '10rpx' }"
            class="list_img"
            :lazy-load="true"
            src="https://img01.yzcdn.cn/public_files/7f12433bfafd042fc81bfd8a73a119cc.png!large.png"
            width="64rpx"
            height="64rpx"
          ></uv-image>
        </view>
      </view>
      <view class="left red">
        <view>
          <view class="p_fon113">热卖榜</view>
          <view class="p_fon12">跟着买不会错</view>
          <uv-image
            :lazy-load="true"
            src="/static/go2@2x.png"
            width="72rpx"
            height="30rpx"
          ></uv-image>
        </view>

        <view
          class="view_clss"
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-left: 35rpx;
            width: 140rpx;
          "
        >
          <uv-image
            class="list_img"
            :lazy-load="true"
            src="https://img01.yzcdn.cn/public_files/7f12433bfafd042fc81bfd8a73a119cc.png!large.png"
            width="136rpx"
            height="139rpx"
          ></uv-image>
        </view>
      </view>
    </view>

    <view v-if="false" class="today">
      <view v-if="false" class="header">
        <uv-image
          :lazy-load="true"
          src="/static/ta@2x.png"
          width="31rpx"
          height="31rpx"
        ></uv-image>
        <span class="sp_fs">今日必抢</span>

        <uv-notice-bar
          icon=""
          fontSize="26rpx"
          color="#9C9C9C"
          :customStyle="{
            background: 'white',
            color: '#9C9C9C',
            padding: 0,
            marginLeft: '40rpx',
          }"
          :text="text"
          direction="column"
        ></uv-notice-bar>
        <view v-if="false" class="more">
          <view>更多</view>
          <uv-icon name="arrow-right" color="black" size="12"></uv-icon>
        </view>
      </view>

      <view class="content_today">
        <uv-scroll-list :indicator="false">
          <view
            @click="gotoDetail(item)"
            v-for="(item, index) in todayGrabData"
            :key="index"
            class="item"
          >
            <uv-image
              :lazy-load="true"
              :src="item.imgUrl"
              width="205rpx"
              height="205rpx"
            ></uv-image>
            <!-- <view class="text"> <span>【2包起购】</span>  松糕吃</view> -->
            <view class="text"> {{ item.goodsTitle }}</view>
            <view class="price">
              <view>￥ {{ item.goodsPrice }}</view>
              <uv-image
                :lazy-load="true"
                src="/static/qiang@2x.png"
                width="56rpx"
                height="34rpx"
              ></uv-image>
            </view>
          </view>
        </uv-scroll-list>
      </view>
    </view>

    <view v-if="false" class="list_goods">
      <view
        v-for="(item, index) in recommendListData"
        :key="index"
        @click="gotoDetail(item)"
        class="item"
      >
        <uv-image
        mode='widthFix'
          :lazy-load="true"
          :src="item.imgUrl"
          width="100%"
        
        ></uv-image>
        <view class="item_title">
          <p class="span_p" style="text-align: left; font-size: 24rpx">
            <view v-if="item.tips" class="nianhuo">
              {{ item.tips }}
            </view>
            <text>
              {{ item.goodsTitle }}
            </text>
          </p>
        </view>

        <view class="prive_title">
          <span class="price_red">￥{{ item.goodsPrice }} </span>

          <span class="price_scale">已售{{ index + +item.prodId }}件 </span>
        </view>

        <view style="display: none" class="margin_top_bottom">
          <view class="box1">多人拼团</view>
          <view class="box2">
            <view class="quan">券</view>
            <view class="quan2">满100元减30</view>
          </view>
        </view>

        <view class="shopmall">
          {{ item.shopName }}
          <uv-icon name="arrow-right" color="#8D8D8D" size="12"></uv-icon
        ></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { userInfo as userInfoS } from "../../https/api/reigist";
import { ref } from "vue";
import {
  prodTagList,
  getTodayGrab,
  tagProdList,
  recommendList,
  topNoticeList,
  indexImgs,
} from "../../https/api/index";
import { onShow, onReachBottom, onLoad } from "@dcloudio/uni-app";
import linup from "../linedUp.vue";

let showIndex = ref(true);
let tabclick = (data) => {
  if (data.name == "排队") {
    showIndex.value = false;
  } else {
    showIndex.value = true;
  }
};

let swiper_list = ref([
  "https://cdn.uviewui.com/uview/swiper/swiper1.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png",
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
]);

onLoad((option) => {
  let shareCode = "";
  console.log("option:" + JSON.stringify(option));
  if (option != null) {
    if (option.q != null) {
      var url = decodeURIComponent(option.q);
      var idx = url.indexOf("https://www.gjlfb.cn/yami?invateCode=");
      if (idx != -1) {
        shareCode = url.substring(
          "https://www.gjlfb.cn/yami?invateCode=".length
        );
      }
    } else if (option.invateCode) {
      shareCode = option.invateCode;
    }
  }
  console.log("shareCode: " + shareCode);
  getApp().globalData.share = shareCode;
  login(shareCode);
});

let clickSeiton = () => {
  uni.showToast({
    title: "暂未开放此功能",
    icon: "none",
  });
};


let noVEIw = () => {
  uni.showToast({
    title: "暂未开放此功能，敬请期待",
    icon: "none",
  });
}

let noVEIw2= () => {
  uni.switchTab({
    url: '/pages/goodsListNew',
   
  })
}

let gotoCat = () => {
  uni.navigateTo({
    url: "/pages/catgroy",
  });
};

let login = (share) => {
  uni.showLoading({
    title: "登录中...",
    mask: true,
  });
  // 1.wx获取登录用户code
  uni.login({
    provider: "weixin",
    success: (loginRes) => {
      let code = loginRes.code;

      //2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
      uni.request({
        url: "https://www.gjlfb.cn/mallApi/" + "loginByWx",
        data: {
          code: code,
          share: share,
        },
        method: "POST",
        header: {
          "content-type": "application/json",
        },
        success: async(res) => {
          uni.hideLoading();
          console.log(res);
          if (res.statusCode == 200) {
            if (!res.data.fail) {
              console.log(res.data.data);
              let result = res.data.data;
              if (result.isRegUser !== 0) {
                // 缓存token的过期时间
                // uni.setStorageSync("expiresTimeStamp", expiresTimeStamp);
                uni.setStorageSync("Token", result.accessToken); // 把token存入缓存，请求接口数据时要用
				uni.setStorageSync(
                      "userInfo",
                      JSON.stringify({login:'xxx'})
                    );
                uni.showToast({
                  title: "登录成功",
                  icon: "none",
                });
                uni.setStorageSync("openId", result.openId);
                uni.hideLoading();
                uni.setStorageSync("loginOk", true);

				let userss = await userInfoS();
				if (!userss.fail) {
    uni.setStorageSync("rebateAmount", userss.data.rebateAmount);
    uni.setStorageSync(
                      "userInfo",
                      JSON.stringify(userss.data)
                    );
 
  }
				
              }else{
				uni.setStorageSync('loginOk',false)
			  }
            } else {
              uni.showToast({
                title: res.data.extMessage,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: "认证失败",
              icon: "none",
            });
          }
        },
        fail: () => {
          uni.hideLoading();
        },
      });
    },
  });
};

let sizeNum = ref(6);

onReachBottom(() => {
  if (totalNum.value >= sizeNum.value) {
    sizeNum.value += 6;
    getrecommendList({ tagId: reCom.value.id, size: sizeNum.value });
  } else {
    uni.showToast({
      title: "没有更多了",
      icon: "none",
    });
  }
});

let gettopNoticeList = async () => {
  let res = await topNoticeList();
  text.value = res.data.map((v) => v.title);
};

let totalNum = ref(0);
let recommendListData = ref([]);
let getrecommendList = async (data) => {
  let res = await getTodayGrab(data);
  if (res) {
    totalNum.value = res.data.total;
    recommendListData.value = res.data.records.map((v) => {
      return {
        ...v,
        imgUrl: v.pic,
        goodsPrice: v.price,
        goodsTitle: v.prodName,
      };
    });
  }
};

let todayGrabData = ref([]);
let getTodayGrabData = async (data) => {
  let res = await getTodayGrab(data);
  if (res) {
    todayGrabData.value = res.data.records.map((v) => {
      return {
        ...v,
        imgUrl: v.pic,
        goodsPrice: v.price,
        goodsTitle: v.prodName,
      };
    });
  }
};

let tips = ref({});
let reCom = ref({});
let getprodTagList = async () => {
  let res = await prodTagList();
  let obj = res.data.find((v) => v.title === "今日必抢");
  let obj2 = res.data.find((v) => v.title.includes("推荐"));

  if (Object.keys(obj).length > 0) {
    tips.value = obj;
    reCom.value = obj2;
  } else {
    tips.value = res.data[0];
    reCom.value = res.data[0];
  }
  getTodayGrabData({ tagId: tips.value.id, size: sizeNum.value });
  getrecommendList({ tagId: reCom.value.id, size: sizeNum.value });
};

let getSwiper = async () => {
  let res = await indexImgs();
  swiper_list.value = res.data.map((v) => v.imgUrl);
};

onShow(() => {
  // getprodTagList()
  // gettopNoticeList()
  getSwiper();
});

let gotoDetail = (item) => {
  uni.setStorageSync("goodsDetailData", JSON.stringify(item));
  uni.navigateTo({
    url: "/pages/goodsDetail",
  });
};

let goToSearch = () => {
  uni.navigateTo({
    url: "/pages/searchPage",
  });
};

let text = ref([
  "Snake 刚抢购成功",
  "joke 刚抢购成功",
  "wink 刚抢购成功",
  "cheems 刚抢购成功",
]);
</script>
<style scoped lang="scss">
.list_goods {
  .prive_title {
    margin-top: 8rpx;
    padding: 0 15rpx;
  }
  .shopmall {
    margin-top: 10rpx;
    display: flex;
    color: #8d8d8d;
    font-size: 22rpx;
    margin-bottom: 20rpx;
    padding: 0 15rpx;
  }
  .margin_top_bottom {
    padding: 0 15rpx;
    margin-bottom: 8rpx;
    margin-top: 6rpx;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .box1 {
      margin-right: 20rpx;
      border: 1px solid #ff1c23;
      width: 85rpx;
      height: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #df0024;
      font-size: 18rpx;
    }
    .box2 {
      display: flex;
      align-items: center;
      margin-right: 20rpx;
    }
    .quan {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-right: 1px dashed #ff1c23;
      color: #df0024;
      font-size: 18rpx;
    }
    .quan2 {
      padding: 1rpx;
      border: 1px solid #ff1c23;
      border-left: none;
      color: #df0024;
      font-size: 18rpx;
    }
  }
  .price_red {
    color: #ff1c23;
    font-size: 31rpx;
  }
  .price_scale {
    margin-left: 20rpx;
    color: #8d8d8d;
    font-size: 22rpx;
  }
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    margin-bottom: 20rpx;
    width: 49%;
    border-radius: 15rpx;
    background: white;
    .item_title {
      font-size: 25rpx;
      padding: 0 15rpx;
      margin-top: 15rpx;

      align-items: center;
    }
    .span_p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; // 控制多行的行数
      -webkit-box-orient: vertical;
    }
    .nianhuo {
      display: inline-block;
      border-radius: 10rpx;
      vertical-align: top;
      font-size: 20rpx;
      background-image: linear-gradient(135deg, rgb(246, 175, 175), red);
      width: 54rpx;
      height: 28rpx;
      text-align: center;
      color: white;
      font-weight: bolder;
      line-height: 28rpx;
      display: inline-block;
    }
  }
}
.content_today {
  margin-top: 20rpx;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  .item {
    margin-right: 30rpx;
    .text {
      overflow: hidden;
      /* 超过了就显示省略号 */
      text-overflow: ellipsis;

      /* webkit内核的浏览器 */
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;

      margin-top: 10rpx;
      font-size: 24rpx;
    }
    .price {
      margin-top: 5rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #ff1c23;
      font-size: 30rpx;
    }
  }
}
.today {
  border-radius: 15rpx;
  margin-top: 20rpx;
  padding: 20rpx;
  background: white;
  .header {
    .more {
      font-size: 24rpx;
      display: flex;
      align-items: center;
    }
    position: relative;
    display: flex;
    align-items: center;
    .sp_fs {
      font-size: 30rpx;
      color: #000000;
      margin-left: 10rpx;
    }
  }
}
.view_clss view:nth-of-type(2) {
  margin-bottom: 10rpx;
}
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    border-radius: 15rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    background-image: linear-gradient(135deg, white, #ffeed6);
    .p_fon11 {
      font-size: 31rpx;
      font-weight: bolder;
      color: #ca9440;
    }
    .p_fon12 {
      margin-top: 12rpx;
      margin-bottom: 18rpx;
      font-size: 22rpx;
      color: #7c7a77;
    }
    .p_fon113 {
      font-size: 31rpx;
      font-weight: bolder;
      color: #d73356;
    }
  }
  .red {
    background-image: linear-gradient(135deg, white, #fee6e5);
  }
}
::v-deep .placeholderClassss {
  color: #aaabad;
  font-size: 25rpx;
}
.header_nav {
  z-index: 20;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: white;
}
.content {
  min-height: 100vh;
  background: #f8f8f8;
  position: relative;
}

.logo_tab {
  padding-top: 20rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
  display: flex;
  align-items: center;
}
.showIndex_s {
  padding-top: 20rpx;
  padding-right: 20rpx;
  padding-left: 20rpx;
}

.box_index_tag {
  padding: 20rpx;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  border-radius: 20rpx;
  box-shadow: 0upx 0upx 10upx #ddd;
  .box_index_tag_s {
    margin-bottom: 30rpx;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.image_box {
  margin-top: 20rpx;
  display: flex;

  align-items: center;
  justify-content: space-between;
}
.jieshao_icon {
  margin-top: 20rpx;
}
</style>